<template>
<view class="container">
	<uni-list v-if="showStatus">
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'settings-filled'}" title="员工编码"
		 :rightText="staff.staffCode" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'person-filled'}" title="员工名称"
			:rightText="staff.staffName" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'compose'}" title="员工年龄"
			:rightText="staff.staffAge+' 岁'" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'staff-filled'}" title="员工性别"
			:rightText="staffSex" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'settings-filled'}" title="员工类型"
			:rightText="staffType" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'phone-filled'}" title="联系方式"
			:rightText="staff.staffPhone" />
		<uni-list-item showExtraIcon="true" :extraIcon="{type: 'chat-filled'}" title="备注">
			<template v-slot:footer>
				<input type="textarea" v-model="staff.remark"
					style="font-size: 12px;color: #999999;text-align: right;" />
			</template>
		</uni-list-item>
	</uni-list>
	<view class="button-group" v-if="showStatus">
		<button plain="true" type="warn" @click="staffDelete" style="width: 45%;">删 除</button>
		<button plain="true" type="primary" @click="staffEdit" style="width: 45%;">修 改</button>
	</view>
	<!-- 修改 -->
	<view class="example" v-if="!showStatus">
	  <uni-forms ref="form" :model="staffList" labelWidth="80px">
	    <uni-forms-item label="员工编码" name="staffCode">
	      <uni-easyinput v-model="staffList.staffCode" placeholder="请输入员工编码" />
	    </uni-forms-item>
	    <uni-forms-item label="员工名称" name="staffName">
	      <uni-easyinput v-model="staffList.staffName" placeholder="请输入员工名称" />
	    </uni-forms-item>
		<uni-forms-item label="员工年龄" name="staffAge">
		  <uni-easyinput v-model="staffList.staffAge" placeholder="请输入员工年龄" />
		</uni-forms-item>
		<uni-forms-item label="员工性别" name="staffSex" required>
		  <!-- 下拉框选择 -->
		  <uni-data-select
		   v-model="staffList.staffSex"
		   :localdata="hmy_staff_sex" 
		   @change="change">
		   </uni-data-select>
		</uni-forms-item>
	    <uni-forms-item label="员工类型" name="staffType" required>
			<!-- 下拉框选择 -->
			<uni-data-select
			 v-model="staffList.staffType"
			 :localdata="hmy_staff_type" 
			 @change="change">
			 </uni-data-select>
	    </uni-forms-item>
	
		<uni-forms-item label="联系方式" name="staffPhone">
		  <uni-easyinput v-model="staffList.staffPhone" placeholder="请输入联系方式" />
		</uni-forms-item>	
		<uni-forms-item label="备注">
			<uni-easyinput type="textarea" v-model="staffList.remark" placeholder="请输入员工介绍" />
		</uni-forms-item>
	  </uni-forms>
	  <view  class="edit-button-group">
		  <button type="primary" @click="back" style="width: 45%;">返 回</button>
		  <button type="primary" @click="submit('form')" style="width: 45%;">提交</button>
	  </view>
	</view>
</view>	

</template>

<script>
import {getStaff,updateStaff,delStaff } from "@/api/hmy/staff";
export default {
	data() {
		return {
			showStatus: true,
			staffId: '',
			staff: {},
			staffList: {},
			staffType: '',
			staffSex: '',
			hmy_staff_type: [{
				text: "操作员",value: "1",
			},{
				text: "分娩工",value: "2"
			},{
				text: "配种工",value: "3"
			},{
				text: "物料管理员",value: "4"
			},{
				text: "妊检",value: "5"
			}],
			hmy_staff_sex: [{
				text: "男",value: "1"
			},{
				text: "女",value: "2"
			}],
		}
	},
	onLoad(option) { //option为object类型，会序列化上个页面传递的参数
		this.staffId = option.id;
		this.getStaff();
	},
	methods: {
		change(e) {
			this.single = e
		},
		getStaff() {
			getStaff(this.staffId).then(response => {
				this.staff = response.data;
				this.staffList = response.data;
				if (this.staff.staffType == 1) {
					this.staffType = '操作员'
				} else if (this.staff.staffType == 2) {
					this.staffType = '分娩工'
				} else if (this.staff.staffType == 3) {
					this.staffType = '配种工'
				} else if (this.staff.staffType == 4) {
					this.staffType = '物料管理员'
				} else if (this.staff.staffType == 5) {
					this.staffType = '妊检'
				} 

				if (this.staff.staffSex == 1) {
					this.staffSex = '男'
				} else if (this.staff.staffSex == 2) {
					this.staffSex = '女'
				}
			})
		},

		//删除
		staffDelete() {
			this.$modal.confirm('是否确认删除员工编号为"' + this.staff.staffId + '"的数据项？').then(() => {
				return delStaff(this.staff.staffId);
			}).then(response => {
				this.$modal.msgSuccess("删除成功");
				setTimeout(()=>{
					this.$tab.navigateTo('/pages/hmy/staff/index');
				},1000)
			}).catch(()=>{
				
			});
		},

		//修改
		staffEdit() {
			this.showStatus = !this.showStatus
		},
		//返回
		back(){
			this.showStatus = !this.showStatus
			this.getPurchase();
		},
		
		//修改提交
		submit(form) {
		  this.$refs[form].validate().then(res => {
			updateStaff(this.staffList).then(response => {
			  this.$modal.msgSuccess("修改成功");
			  setTimeout(()=>{
				this.$tab.navigateTo('/pages/hmy/staff/index');
			  },1000)
			})
		  })
		}
	}
}
</script>

<style>
page {
	background-color: #ffffff;
}
.button-group {
	/* margin-top: 50px; */
	display: flex;
	justify-content: space-around;
	width:100%;
	position:fixed;
	bottom:5px;
}
.example {
  padding: 15px;
  background-color: #fff;
}
.edit-button-group{
	display: flex;
	justify-content: space-around;
}
</style>